<!--vue模板-->
<template>
  <!--按钮-->
  <div class="nav">
    <el-button type="primary" @click="saveOrUpdate()" v-if="$hasAuth('sys:dept:save')">添加部门</el-button>
  </div>
  <!--树和工作区-->
  <el-row class="hgt">
    <!--部门树-->
    <el-col :span="5" class="hgt">
      <el-tree :data="treeData" :props="defaultProps"  :default-expand-all="true"   @node-click="handleNodeClick"/>
    </el-col>
    <el-col :span="1">&nbsp;</el-col>
    <el-col :span="18">
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="code"
          label="编码"
          width="180"
          header-align="center"
        />
        <el-table-column prop="name" label="名称" header-align="center" />
        <el-table-column prop="isBrand" label="是否分公司" />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="180"
        >
          <template v-slot="{ row }">
            <el-button type="primary" @click="saveOrUpdate(row)" v-if="$hasAuth('sys:dept:update')">修改</el-button>
            <el-button type="danger" v-if="$hasAuth('sys:dept:delete')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!--保存或修改对话框-->
  <save-or-update
    v-model:visible="isShowDialog"
    ref="saveupdate"
    @refreshData="refreshData"
  ></save-or-update>
</template>

<!--vue 组件选项定义-->
<script>
import SaveOrUpdate from "./SaveOrUpdate.vue";
export default {
  data() {
    return {
      defaultProps: {
        children: "childs",
        label: "name"
      },
      tableData: [],
      treeData: [], //树形数据
      isShowDialog: false,
    };
  },
  components: {
    SaveOrUpdate,
  },
  created(){
     this.refreshData();
  },
  methods: {

    //刷新数据 
    refreshData(){
        this.queryDeptTree();
        this.queryChild("1");
    },

    //查询部门树
    queryDeptTree() {
      this.$http.get("/api/dept/allchild", { pid:'0' }).then((res) => {
        if (res.code == 200) {
            this.treeData=res.result;
        }
      });
    },

    //点击树时
    handleNodeClick(node){
       this.queryChild(node.code);
    },

    //根据部门编码查询所有子部门
    queryChild(code) {
      this.$http.get("/api/dept/childs", { code }).then((res) => {
        if (res.code == 200) {
            this.tableData=res.result;
            console.log("this.tableData>>>",this.tableData)
        }
      });
    },


    //添加或修改部门
    saveOrUpdate(data){
        this.isShowDialog = true;
        this.$refs.saveupdate.init(data);
    }
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.el-tree) {
  border-style: none;
  border-right: #ccc solid 1px;
}

.hgt {
  height: 98%;
}

.nav {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}
</style>
